<!DOCTYPE html>
<html lang="en">
<head>
    {{template "api_head_script" .}}
	<script src="/js/marked.min.js"></script>
</head>
<body>
{{template "api_header"}}
<div class="container">
	<div class="row" style="padding-bottom: 30px;">
		<div class="col-md-12" style="margin: 10px;">
			<button class="btn btn-info show-cs" id="back">返回</button>
			<button class="btn btn-info show-cs" id="edit">信息有误？点此编辑提交最新资料!</button>
			<button class="btn btn-info show-cs" id="forDetail">查看国外网站API详情</button>
			<button class="btn btn-info edit-cs" id="save">点次提交保存</button>
			<button class="btn btn-info edit-cs" id="cancel">取消</button>
		</div>
		<div class="col-md-12">
			<label class="h2" id="name" flag="{{.api.ID}}" flag1="{{.type}}">{{.api.Name}}</label>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="input-group">
				<span class="input-group-addon" id="basic-addon0">中文名称：</span>
				<input id="name_cn" type="text" class="form-control edit-input" placeholder="" aria-describedby="basic-addon0" value="{{.api.NameCn}}">
			</div>
		</div>
		<!--<div class="col-md-12" style="margin: 20px 0px;">
			<div class="input-group">
				<span class="input-group-addon" id="basic-addon1">简介：</span>
				<input id="desc" type="text" class="form-control edit-input" placeholder="" aria-describedby="basic-addon1" value="{{.api.Desc}}">
			</div>
		</div>-->
		<div class="col-md-12 edit-cs" style="margin: 20px 0px;">
			<div class="input-group">
				<span class="input-group-addon" id="basic-addon2">详情：</span>
				<textarea id="info_desc" class="form-control" style="resize: none;" rows="13" aria-describedby="basic-addon2">{{.api.Desc}}</textarea>
			</div>
		</div>
		<div class="col-md-12 show-cs" style="margin: 20px 0px;">
			<div class="input-group">
				<span class="input-group-addon" id="basic-addon3">详情：</span>
				<div id="target-text" class="form-control" aria-describedby="basic-addon3" style="height: auto;min-height: 30px;"></div>
			</div>
		</div>
	</div>
    {{template "common_footer"}}
</div>
<br><br>
<script>
	function fillText() {
		var htmlStr = marked($("#info_desc").val());
		var reg = /<table>/g;
		htmlStr = htmlStr.replace(reg, "<table class='table table-bordered'>");
		$("#target-text").html(htmlStr);
	}

	function editHide() {
		$(".edit-cs").hide();
		$(".show-cs").show();

		$(".input-group .input-group-addon").addClass("show-background");
		$(".input-group .form-control").addClass("show-background");
	}

	function editShow() {
		$(".edit-cs").show();
		$(".show-cs").hide();

		$(".input-group .input-group-addon").removeClass("show-background");
		$(".input-group .form-control").removeClass("show-background");
	}

	editHide();
	$(function() {
		fillText();

		$("#edit").click(function() {
			editShow();

			$(".input-group .form-control").eq(0).focus();
		});
		$("#cancel").click(function() {
			editHide();
		});
		$("#save").click(function() {
			$.post("/api/apiUnverify", {
				id: $("#name").attr('flag'),
				type: $("#name").attr('flag1'),
				nameCn: $("#name_cn").val(),
				desc: $("#desc").val(),
				infoDesc: $("#info_desc").val()
			}, function(resp) {
				fillText();
				alert('感谢提供最新信息，校验通过后即会展示！');
				editHide();
			});
		});
		$("#back").click(function() {
			window.history.back();
		});
		$("#forDetail").click(function() {
			var id = $("#name").attr("flag");
			var t = $("#name").attr("flag1");
			window.open("/api/forgnDetail/" + id + "?type=" + t);
		});
	})
</script>
</body>
</html>